<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="renderer" content="webkit" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="format-detection" content="telphone=no, email=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>AKjs移动端框架</title>
  <link rel="stylesheet" type="text/css" href="css/akjs.mobile.min.css" /><!--AKjs公共样式库引入-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /><!--布局相关样式-->
  <link rel="stylesheet" type="text/css" href="css/theme.default.css" /><!--颜色相关样式-->
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/data.js"></script><!--Json数据-->
  <script type="text/javascript" language="javascript" src="js/akjs.mobile.min.js"></script><!--AKjs引入-->
  <script type="text/javascript" language="javascript" src="js/plugin.js"></script><!--功能插件按需引入-->
</head>
<body>

<!----------Andrew_PopupWin---------->
<header class="press bor_bottom bor_gray_ddd bg_gray_f9f dis_block">
  <button type="button" class="left_0 w_25 pl_3 text_al_l text_12em" data-href="javascript:history.back();"><i class="text_14em icon-ln_fanhui_b"></i>返回</button>
  <h1 class="text_al_c">聊天展示</h1>
</header>

<main>

  <div class="wp_94 mb_5 ovh plug_chat">
    <ul>
      <li class="ovh mt_1em">
        <dl class="ak-chat_left">
          <dt>
            <figure class="wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="img/tibet-1.jpg"></figure>
            <span class="center text_08em c_gray_777 text_al_c">KIM</span>
          </dt>
          <dd>您好，我想要咨询一下一个问题。</dd>
        </dl>
      </li>
      <li class="ovh mt_1em">
        <dl class="ak-chat_right">
          <dt>
            <figure class="wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="img/tibet-2.jpg"></figure>
            <span class="center text_08em c_gray_777 text_al_c">安德鲁</span>
          </dt>
          <dd class="border bg_title bor_title c_white">好，您请说</dd>
        </dl>
      </li>
      <li class="ovh mt_1em">
        <dl class="ak-chat_left">
          <dt>
            <figure class="wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="img/tibet-1.jpg"></figure>
            <span class="center text_08em c_gray_777 text_al_c">KIM</span>
          </dt>
          <dd>AKjs移动端插件是依赖于jquery插件的吗？</dd>
        </dl>
      </li>
      <li class="ovh mt_1em">
        <dl class="ak-chat_right">
          <dt>
            <figure class="wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="img/tibet-2.jpg"></figure>
            <span class="center text_08em c_gray_777 text_al_c">安德鲁</span>
          </dt>
          <dd class="border bg_title bor_title c_white">是的，必须引入jquery插件才能正常运行。</dd>
        </dl>
      </li>
      <li class="ovh mt_1em">
        <dl class="ak-chat_left">
          <dt>
            <figure class="wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto"><img src="img/tibet-1.jpg"></figure>
            <span class="center text_08em c_gray_777 text_al_c">KIM</span>
          </dt>
          <dd>好的。明白了</dd>
        </dl>
      </li>
    </ul>
  </div>

</main>

<footer class="press bg_gray_f9f dis_block">
  <menu>
    <div class="wp_94 bg_gray_f5fg bor_top bor_gray_ddd plug_form">
      <form action="#" method="get" onsubmit="return false;">
        <input type="text" class="fl bg_white w_85 h_24em line_h_100 pl_05em c_gray_777 border bor_gray_ddd bor_rad_05em mt_03em" placeholder="请输入文字" value="" />
        <button class="fr wh_24em bor_rad_50 bg_title mt_03em mb_0" type="submit">
          <i class="c_white text_14em icon-mn_fasong_fill"></i>
        </button>
      </form>
    </div>
  </menu>
</footer>

</body>
<script type="text/javascript">
    //引入Andrew插件的区域
    if (window.location.protocol == "file:") {
        alert("AKjs仅支持http或https协议访问！不支持直接打开本地文件的方式访问！通过本地配置服务器访问或者使用WebStorm软件打开访问即可！");
        throw new Error();
    }
    /*-----------------------------------------------Andrew_Config (全局设置）使用方法-------------------------------------------*/
    $(function () {
        Andrew_Config({ //环境配置管理
            MaskStyle: ["style3","opacity07"], //1.所有弹窗背景图案选择（样式style1~8）、2.遮挡层背景的透明度（opacity01~09）
            Responsive: true, //是否开启文字大小按屏幕尺寸自适应变化，考虑到兼容平板电脑建议开启 (开启 true, 停用 false）
            touchstart: true, //是否开启移动端active效果, 建议开启 （元素的class里加touchstart即可用）(使用 true,不使用 false）
            ButtonLink: true, //通过元素中加data-href属性的方式跳转界面, 建议开启路由功能后使用。(使用button超链接 true,不使用button超链接 false）
            WechatHeader: true, //是否通过微信浏览器访问时自动隐藏应用的头部区域, 可以通用建议开启 (使用隐藏 true, 不使用隐藏 false）
            Topdblclick: true, //是否开启点击应用的头部让页面回头顶部 (开启 true, 停用 false）
            fixedBar: true, //输入信息时应用的头部绝对固定在屏幕最上方，底部有输入框时不被虚拟键盘遮挡 （不通过微信访问才生效，开启WechatHeader的参数时请关闭该参数）
            animation: true, //是否开启元素里加动画参数的功能？（例：data-animation="{name: 'zoomIn', duration:1, delay: 0}"） 动画库：andrew.animate.css
            Orientation: true, //是否开启应用只允许竖屏浏览 (使用 true, 不使用 false）
            Prompt: "为了更好的视觉体验，请在竖屏下进行操作。" //应用横屏是提示文字 (必须开启Orientation的选项才能生效)
        });
    });

    /*-----------------------------------------------Andrew_Loader 使用方法-------------------------------------------*/
    $(function () {
        Andrew_Loader({
            //ele: $("main"), //是否使用局部遮挡层，使用请设置指定的局部元素 （不设置任何参数代表使用全部遮挡层）
            autoMode: true, //是否开启指定的时间后自动消失功能 (开启 true, 关闭 false）
            timeToHide:1000, //毫秒时间设置 (automode必须开启才能有效)
            iconColor:"#ffffff", //图标颜色设置
            maskBG: false, //是否开启遮挡背景 (开启 true, 关闭 false）
            Loader:"load_2" //loading效果选择（load_1~7）
        });
        setTimeout(function() { //页面加载完5秒后执行
            if($(".ak-Loader").css('display') == 'none'){
                Andrew_Loader("destroy"); //关闭loading窗
            }
        },2000);
    });

      $(".plug_form").find("input").on("input propertychange", function(e){
          e.preventDefault();
          if ($(this).prop("value").length > 0) {
              //console.log($(this).prop("value")) //实时监听输入框值的变化
          }
      });
    $(".plug_form").find("button").click(function () {
        if ($(this).prev("input").prop("value").length > 0) {
            var chat_str = $(this).prev("input").prop("value"); //获取实时的输入的消息
            var chat_auto = "很高兴认识你！我是自动回复机器人！" //对方的自动回复消息

            var chat_portrait_me = "img/tibet-2.jpg"; //您的头像图片地址
            var chat_portrait_you = "img/tibet-1.jpg"; //对方的头像图片地址
            var chat_name_me = "安德鲁"; //您的聊天名称
            var chat_name_you = "KIM"; //对方的聊天名称

            //您的聊天元素设置
            var chat_view_me = "<li class=\"ovh mt_1em\">\n" +
                "            <dl class=\"ak-chat_right\">\n" +
                "                <dt>\n" +
                "                    <figure class=\"wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto\"><img src="+chat_portrait_me+"></figure>\n" +
                "                    <span class=\"center text_08em c_gray_777 text_al_c\">"+chat_name_me+"</span>\n" +
                "                </dt>\n" +
                "                <dd class=\"border bg_title bor_title c_white\">"+chat_str+"</dd>\n" +
                "            </dl>\n" +
                "        </li>";

            //对方的聊天元素设置
            var chat_view_you = "<li class=\"ovh mt_1em\">\n" +
                "            <dl class=\"ak-chat_left\">\n" +
                "                <dt>\n" +
                "                    <figure class=\"wh_3em bg_gray_f5f bor_rad_50 border bor_gray_ddd img_auto\"><img src="+chat_portrait_you+"></figure>\n" +
                "                    <span class=\"center text_08em c_gray_777 text_al_c\">"+chat_name_you+"</span>\n" +
                "                </dt>\n" +
                "                <dd>"+chat_auto+"</dd>\n" +
                "            </dl>\n" +
                "        </li>";

            var scrollHeight = $("main").prop("scrollHeight"); //获取实时变化的main元素的高度

            $(chat_view_me).appendTo($(".plug_chat").children("ul")); //生成您的聊天元素
            $("main").scrollTop(scrollHeight); //发送消息后让滚动调自动滚到最底部

            setTimeout(function() { //对方的聊天内容延迟执行
                $(chat_view_you).appendTo($(".plug_chat").children("ul")); //生成对方的聊天元素
                $("main").scrollTop(scrollHeight); //发送消息后让滚动调自动滚到最底部
            },1000);

            $(this).prev("input").val(""); //发送消息后输入框的文字自动清空
        }
    });
</script>
</html>